<template>
  <el-input clearable v-model="input1" @keyup.enter="getUser" @blur="getUser" style="width: 240px;margin-right: 15px;"
    placeholder="搜索登录名" size="large" />
  <el-input clearable v-model="input2" @keyup.enter="getUser" @blur="getUser" style="width: 240px;margin-right: 15px;"
    placeholder="搜索姓名" size="large" />
  <el-button type="primary" @click="state.dialogFormVisible = true" size="large">+添加</el-button>
  <!-- select -->
  <br>
  <el-select v-if="myArray.arr.length > 0" v-model="operation.value" @change="handleOperationChange"
    :placeholder='placeholder' style="width: 240px;margin:20px 0;" size="large">
    <el-option v-for="item in operation.operate" :key="item.value" :label="item.label" :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
        {{ item.value }}
      </span>
    </el-option>
  </el-select>
  <el-card style="margin-top: 15px;">
    <el-table @selection-change="handleSelectionChange" border :data="state.userData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column property="username" label="用户名" />
      <el-table-column property="trueName" label="姓名" />
      <el-table-column property="roleId" label="角色">
        <template #default="{ row }">
          {{ roleText(row.roleId) }}
        </template>
      </el-table-column>
      <el-table-column property="createDate" label="创建时间" />
      <el-table-column property="status" label="状态">
        <template #default="{ row }">
          {{ statusText(row.status) }}
        </template>
      </el-table-column>
    </el-table>
  </el-card>


  <el-dialog v-model="state.dialogFormVisible" title="添加用户" width="35%">
    <el-form :model="form">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off" size="large" style="width: 240px;" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" size="large" style="width: 240px;" />
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="formLabelWidth">
        <el-input v-model="form.truename" autocomplete="off" size="large" style="width: 240px;" />
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择用户权限" size="large" style="width: 240px;">
          <el-option label="学生" value="1" />
          <el-option label="教师" value="2" />
          <el-option label="超级管理员" value="3" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="concle">取消</el-button>
        <el-button type="primary" @click="addUser">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination v-model:current-page="state.page.pageNo" v-model:page-size="state.page.pageSize"
      :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total=state.total @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, inject } from 'vue'
import { ElTable, ComponentSize } from 'element-plus'

import {
  addUsers,
  getUsers,
  handleUser
} from '@/api/system/UserManage'


const operation = reactive({
  transferValue: [],
  value: '',
  operate: [
    {
      value: 'on',
      label: '启用',
    },
    {
      value: 'off',
      label: '禁用',
    },
    {
      value: 'delete',
      label: '删除',
    },
  ]
})

const myArray = reactive({
  arr: []
})


const roleText = (roleId) => {
  switch (roleId) {
    case 1:
      return '学生';
    case 2:
      return '老师';
    case 3:
      return '超级管理员';
    default:
      return '未知角色';
  }
}

const statusText = (status) => {
  switch (status) {
    case 1:
      return '正常';
    case 2:
      return '禁用';
    default:
      return '未知状态';
  }
}
const handleSelectionChange = (selectedRows: []) => {
  myArray.arr = selectedRows
  placeholder.value = `已选择${myArray.arr.length}项`
}

function concle() {
  state.dialogFormVisible = false
  form.username = "",
    form.password = "",
    form.truename = "",
    form.region = ""
}

const formLabelWidth = '140px'

const placeholder = ref('')

const form = reactive({
  username: '',
  password: '',
  truename: '',
  region: '',
})

const state = reactive({
  userData: [],
  dialogFormVisible: false,
  page: {
    pageNo: 1,
    pageSize: 10
  },
  total: 0
})

async function addUser() {
  state.dialogFormVisible = false
  await addUsers(
    {
      username: form.username,
      trueName: form.truename,
      roleId: form.region,
      password: form.password,
    })
  getUser()
  form.username = "",
    form.password = "",
    form.truename = "",
    form.region = ""
}


async function getUser() {
  var { data } = await getUsers(state.page.pageNo, state.page.pageSize, input1.value, input2.value)
  state.userData = data.data.users
  state.total = data.data.total
}

onMounted(() => {
  getUser();
})

const input1 = ref('')
const input2 = ref('')
const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('default')

const handleSizeChange = (val: number) => {
  console.log(`每页数量${val}`)
  state.page.pageSize = val
  getUser()
}

const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`)
  state.page.pageNo = val
  getUser()
}

const handleOperationChange = async (value: string) => {
  const userIds = myArray.arr.map(item => item.id).join(',')
  const v = value == 'on' ? 1 : value == 'off' ? 2 : 3
  await handleUser(v, userIds)
  getUser()
}
</script>

<style scoped lang="less">
.demo-pagination-block+.demo-pagination-block
{
  margin-top: 10px;
}

.demo-pagination-block .demonstration
{
  margin-bottom: 16px;
}
</style>